/* 
    1. less 文件的扩展名 .less
    2. less 是完全兼容 css
    3. less 里面支持 变量，四则运算，嵌套 √， 混入（函数），判断，循环
 */

* {
    margin: 0;
    padding: 0;

}

/* less 使用@定义变量 sass 使用 $ */
@color: gold;

.box {
    width: 100 + 200px;
    height: 100 - 20px;
    border: 10 * 8px solid pink;
    //  ./ 除法
    // font-size: 40./2px;
    font-size: (40px / 2);
    background-color: @color;
}

.list {
    list-style: none;

    .item {
        width: 100px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #000;
        margin-bottom: 20px;
        background: #f000;
        text-align: center;

        &:hover {
            background-color: gold;
        }
    }

    .active {
        background-color: gold;
    }
}